<template>
    <yd-layout>
        <div slot="navbar" class="translate-wrapper">
            <transition name="translate-fade" mode="out-in">
                <yd-navbar v-if="webar.nav" :title="webar.nav.title">
                    <router-link slot="left" v-if="webar.nav.back" :to="webar.nav.back">
                        <yd-navbar-back-icon>返回</yd-navbar-back-icon>
                    </router-link>
                    <router-link slot="right" v-if="webar.nav.right" :to="webar.nav.right.to">
                        <yd-icon :name="webar.nav.right.icon" size="25px" color="#777"></yd-icon>
                    </router-link>
                </yd-navbar>
            </transition>
        </div>
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
        <we-menu slot="tabbar"></we-menu>
    </yd-layout>
</template>

<script>
module.exports = {
    data () {
        return {
            timedLoader: 0,
            dataLoaded: 1
        }
    },
    created () {
        this.timedLoader = setInterval(() => {
            if(this.dataLoaded) {
                this.dataLoaded = 0
                this.$store.dispatch('loadState' , () => {
                    this.dataLoaded = 1
                })
            }
        }, 10000)
    },
    beforeDestroy () {
        clearInterval(this.timedLoader)
    },
    computed: {
        webar () {
            return this.$store.getters.webar
        }
    }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: all .3s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}
* {
    box-sizing: border-box;
}
.yd-popup-center, .yd-popup-content {
    border-radius: .2rem;
}
.yd-list-img img {
    border-radius: .1rem;
}
#app {
    .main {
        position: relative;
        overflow: hidden;
        background-color: #eee;
    }
    .text {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
    }
    .message {
        height: calc(100% - 160px);
    }
}
.translate-wrapper {
  position: relative;
  z-index: 100;
}
.translate-fade-enter-active, .translate-fade-leave-active {
  transition: all .3s;
}
.translate-fade-enter, .translate-fade-leave-active {
  opacity: 0;
}
.translate-fade-enter {
  transform: translateY(-1rem);
}
.translate-fade-leave-active {
    top: 0;
  transform: translateY(-1rem);
}
</style>
